<template>
  <el-select style="width: 100%" v-model="shopName" value-key="id" clearable filterable placeholder="文章"
    :filter-method="remoteMethod" @change="selectShop">
    <el-option v-for="item in shopList" :key="item.id" :label="item.title" :value="item">
    </el-option>
  </el-select>
</template>

<script>
import {list as shopList} from '@/api/article'
  import utils from '../../utils/utils.js'
  export default {
    props: ["shopname"],
    data() {
      return {
        shopName: '',
        shopList: [],
        query:{
          shopId:'',
          name:""
        }
      }
    },
    watch:{
      shopname(newval,oldval){
        this.shopName=newval
      }
    },
    created(){
       if(!utils.isNull(this.shopname)){
          this.shopName=this.shopname
        }
      var _this = this
       _this.loadShop('')
    },
    methods: {
      remoteMethod(query) {
        this.loadShop(query)
      },
      loadShop(query) {
        var _this = this
        let params = new URLSearchParams();
        params.append('keyword', query)
        shopList(params).then(response => {
          _this.shopList = response.data.data
          if(!utils.isNull(_this.shopname)){
            _this.shopName=_this.shopname
          }
        })
      },
      selectShop(e) {
        if (!utils.isNull(e)) {
          this.query.shopId = e.id
          this.query.name = e.title

        } else {
          this.query.shopId=""
          this.query.name = ''
        }
         this.$emit('queryArticleClick',this.query)
      },
    },
    }
</script>

<style>
</style>
